<script >
import {Paperclip, Delete, Search} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
export default {
  components: {
    Paperclip,
    Search// 如果需要在模板中直接使用图标组件，可以在这里注册
  },
  computed: {
    Search(){
      return Search
    },
    Delete() {
      return Delete
    }
  },
  data() {
    return {
      currentpage:1,
      pagesize:3,
      PageInfo:{},
      querylookrole:{
        role:null
      },
      querylook: {
        user_id: null,
        log_page:null,
        log_time:'',
      },
      form: {},
      look_log: [],
      multipleSelection: [], // 用于存储选中的行ID
    }
  },
  methods: {
    btnDel(look_id) {
      console.log(look_id);
      this.$http.get("http://localhost:8080/look/del/" + look_id).then((res) => {
        console.log(res.data);
        if (res.data === 1) {
          console.log("删除成功！");
          ElMessage({
            message: '删除成功！',
            type: 'success',
          })
          this.LoadLookData()
        } else {
          console.log("删除失败！");
          ElMessage({
            message: '删除失败！',
            type: 'warning',
          })
        }
      }).catch((err) => {
      })
    },
    onSubmit() {
      console.log(this.querylook);
      this.LoadLookData();
      console.log(this.querylookrole);
      this.LoadLookRoleData();
    },
    LoadLookRoleData(){
      this.$http.get("http://localhost:8080/look/querylookrole",{
        params:{
          role:this.querylookrole.role
        }
      }).then((res)=>{
        this.look_log=res.data;
        console.log(this.look_log);
      }).catch(function(err){
  console.log(err)
      })
    },
    LoadLookData() {
      this.$http.get("http://localhost:8080/look/querylook", {
            params: {
              user_id: this.querylook.user_id,
              log_page: this.querylook.log_page,
              log_time:this.querylook.log_time,
            }
          }
      ).then((res) => {
        this.look_log = res.data;
        console.log(this.look_log);
      }).catch(function (err) {
        console.log(err)
      })
    },
   handleDateTimeChange(date) {
    console.log(date); // 当日期时间发生变化时，打印新的值
      this.querylook.log_time = date;
      // 在这里可以执行其他逻辑，如搜索、更新数据等
    },
    // 处理选中行的变化
    handleSelectionChange(val) {
      this.multipleSelection = val.map(row => row.look_id); // 假设每行数据都有一个唯一的act_id字段
    },
    // 批量删除操作
    batchDelete() {
      if (this.multipleSelection.length > 0) {
        // 假设我们在这里只是从前端数组中移除数据，实际项目中可能需要发送请求到后端删除
        this.look_log = this.look_log.filter(row => !this.multipleSelection.includes(row.look_id));
        this.multipleSelection = []; // 清空选中的ID
        // 如果需要，可以添加提示或发送请求到后端
        this.$message({
          message: '成功删除选中的操作日志',
          type: 'success'
        });
      } else {
        this.$message({
          message: '请先选择需要删除的行',
          type: 'warning'
        });
      }  // 处理选中行的变化
    },
  },
  mounted() {
    this.LoadLookData()
    this.LoadLookRoleData()
  },
}
</script>

<template>
  <el-card style="max-width: 100%">
    <template #header>
      <div class="card-header" style="text-align: center;">
        <span><h2>访问日志</h2></span>
      </div>
    </template>
    <el-form :inline="true" :model="querylook" class="demo-form-inline">
      <td>
        <el-form-item label="用户ID" style="width: 200px;">
        <el-input v-model="querylook.user_id"  placeholder="用户ID"/>
        </el-form-item>
      </td>
      <td>
        <el-form-item label="访问页面" style="width: 200px;">
          <el-input v-model="querylook.log_page"  placeholder="访问页面"/>
        </el-form-item>
      </td>
      <td>
        <el-form-item label="访问时间" style="width:300px">
          <el-date-picker
              v-model="querylook.log_time"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="选择日期时间"
              @change="handleDateTimeChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  :icon="Search"    @click="onSubmit">查询</el-button>
          <el-button type="danger" @click="batchDelete">批量删除</el-button>
        </el-form-item></td>
      <el-form-item label="登陆身份" style="width: 180px">
        <el-select
            v-model="querylookrole.role"
            placeholder="选择身份"
            clearable
        >
          <el-option label="用户" value="1" />
          <el-option label="管理员" value="0" />
        </el-select>
      </el-form-item>
    </el-form>
    <br/>
    <el-table
        ref="multipleTableRef"
        :data="look_log"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        class="custom-header-table"><!-- 添加自定义类名 -->
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="look_id" label="访问ID" width="70"/>
      <el-table-column prop="user_id" label="用户ID" width="70"/>
      <el-table-column prop="user_ip" label="用户IP" width="120"/>
      <el-table-column prop="user_name" label="用户名称" width="100"/>
      <el-table-column prop="role" label="登录身份" width="100">
        <template #default="scope">
          {{ scope.row.role=== 0 ? "管理员":"用户"}}
        </template>
      </el-table-column>
      <el-table-column prop="log_time" label="访问时间" width="180"/>
      <el-table-column prop="wait_time" label="停留时间" width="100"/>
      <el-table-column prop="log_way" label="访问方式" width="100"/>
      <el-table-column prop="log_page" label="访问页面" width="100"/>
      <el-table-column prop="log_state" label="访问结果" width="100"/>
      <el-table-column prop="log_device" label="访问设备信息" width="100"/>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" icon-color="#626AEF"
                         title="你确认删除吗?" @confirm="btnDel(scope.row.look_id)">
            <template #reference>
              <el-button type="danger" :icon="Delete"/>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="currentpage"
        v-model:page-size="pagesize"
        :page-sizes="[3,4,5,6]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="PageInfo.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<style scoped>
/* 使用深度选择器来覆盖 Element UI 的默认样式 */
.custom-header-table >>> .el-table__header-wrapper th {
  background-color: #87CEFA; /* 浅蓝色背景 */
  color: #333; /* 文字颜色 */
  /* 其他样式 */
}
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

</style>